Packaging a JavaScript Add-on (Plugin)

[Eolian Tomcini]

Hello!
1. I need help regarding the display of the ID of the data lab project or data lab function. I am building an addon and I am in the stage of packaging the addon. I'm using the API plugin but I'm having a hard time. I have created a data lab project called 'test' and inside there are index.html and main.js.
Inside index.html (inside head) are called the SDK script seeq.js and main.js.
The code of main.js is very simple, I just want to extract the ID of the project by setting the name of the project

const projectName = 'test';
let api;

async function initializeApi() {
  if (!api) {
    const _seeq = await getSeeqApi();
    api = _seeq;  // Assuming api.set() is setting the api object itself
  }
}

async function getProjectData() {
  try {
    await initializeApi();  // Ensure api is initialized
    const projectResponse = await api.getDataLabProject(projectName);

    const projectId = projectResponse.projectId;

    if (!projectId) {
      throw new Error(`Project with name "${projectName}" not found.`);
    }

    console.log(`Project ID: ${projectId}`);
  } catch (error) {
    console.error(error);
  }
}
getProjectData();

As a result, nothing appears in the browser's developer tools console. I can't figure out what I'm doing wrong.

2. I have another question. I was doing tests for the addon package, after installing it and trying to open it in a worksheet, the addon opens inside the worksheet while I have to open it in a new browser window or tab.
here is the addon.json config file:

{
    "identifier": "com.seeq.addon.test",
    "name": "TEST Add-on",
    "description": "An Test Add-on with all element types",
    "version": "1.0.0",
    "maintainer": "TEST-Inc",
    "license": "TEST-Inc",
    "icon": "fa fa-ghost",
    "previews":["additional_content/previewImage.png"],
    "elements": [
        {
            "name": "TEST Tool Pane Plugin",
            "identifier": "com.seeq.addon.TEST.frontend",
            "type": "Plugin",
            "category": "ToolPane",
            "path": "frontend"
        },
        {
            "name": "API Add-On Tool",
            "description": "A test Add-on Tool",
            "identifier": "com.seeq.addon.TEST.addontool",
            "type": "AddOnTool",
            "path": "functions_addon_tool",
            "notebook_file_path": "API.ipynb",
            "extensions": [],
            "configuration_schema": {
                "type": "object",
                "properties": {
                    "display": {
                        "type": "object",
                        "properties": {
                            "icon": {
                                "type": "string",
                                "default": "fa fa-wrench"
                            },
                            "linkType": {
                                "enum": [
                                    "window"
                                ],
                                "default": "window"
                            },
                            "sortKey": {
                                "type": "string",
                                "default": "a"
                            },
                            "windowDetails": {
                                "type": "string",
                                "default": "toolbar=0,location=0,scrollbars=0,statusbar=0,menubar=0,resizable=0,height=550,width=420"
                            },
                            "reuseWindow": {
                                "type": "boolean",
                                "default": true
                            },
                            "includeWorkbookParameters": {
                                "type": "boolean",
                                "default": true
                            }
                        },
                        "required": [
                            "icon",
                            "linkType",
                            "sortKey",
                            "windowDetails",
                            "reuseWindow",
                            "includeWorkbookParameters"
                        ]
                    },
                    "project": {
                        "type": "object",
                        "properties": {}
                    }
                },
                "required": [
                    "display"
                ]
            },
            "configuration_filename": "configuration",
            "configuration_converter": "json"
        }
    ]
}

Thank you!

[Bryan Zimmerman]

Hi Eolian, 

Given that JavaScript code, I also would expect to see a log message or error in the browser developer tools. That leads me to suspect the code is not being executed, but I see from your message that you are including main.js in a script tag in your index.html. 

With your plugin displayed in the browser (in this case, opened in the Tools pane by selecting your “TEST Tool Pane Plugin” from the “Add-ons” group) and the browser developer tools open, you should be able to open and view your main.js file using keyboard shortcut CTRL-P (or CMD-P on Mac) in Chrome and typing the name of the file. If you can’t see the main.js file in the browser, then it’s not being loaded. You can also reload the page with the browser developer tools Network tab open and you should see the main.js file being loaded. 

Something that could be helpful, we recently released the `seeq-addon-templates` project on GitHub (https://github.com/seeq12/seeq-addon-templates), which you could use to quickly create an example packaged Add-on to compare against your project. 

Regarding your second question, JavaScript frontend plugins (type "Plugin") display integrated into the Seeq application, whereas Python Add-on Tools (type "AddOnTool") must launch a new tab or window. 

I hope this helps. Please let us know if you need additional assistance. 

Bryan 

[Eolian Tomcini]

Hi Bryan!
Thanks for the quick reply!
To simplify the question as much as possible, I created a new data lab project which I named test and inside it there are 2 files: index.html and main.js. The aim here is to extract the ID of the project using the name "test". 
Normally I have to do this using the functions from API plugin and SDK script 'seeq.js', so I have imported in index.html 2 js scripts: <script src="/api/plugins/sdk/seeq.js">< /script> and <script src="main.js"></script>. My problem is that I can't access or execute getSeeqApi() from the sdk (seeq.js), it reacts as if it doesn't exist when I actually call it. Below are the html code index.html and the js code main.js

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
        <title>Title</title>
        <script src="/api/plugins/sdk/seeq.js"></script>
    </head>
    
    <body>
        <div id="root"></div>
        <script src="main.js"></script> 
    </body>
</html>

 

main.js (using async)

const DLF_PROJECT_NAME = "test";
console.log(`${DLF_PROJECT_NAME}`);

async function initializeSeeq(){
    await getSeeqApi().then( (_seeq) => {
        console.log("_seeq: ",_seeq);
        const projectId = _seeq.getDataLabProject(DLF_PROJECT_NAME);
        console.log("projectId: ", projectId);
        return projectId;
    });
    
}

 

main.js (without async)

function initializeSeeq(){
    getSeeqApi().then(_seeq => {
        console.log("_seeq: ",_seeq);
        const projectId = _seeq.getDataLabProject("test");
        console.log("projectId: ", projectId);
        return projectId;
    });
}
    
document.addEventListener("DOMContentLoaded", function() {

    let projectId;
    const DLF_PROJECT_NAME = "test";
    console.log(`${DLF_PROJECT_NAME}`);
    initializeSeeq();
    console.log('ehaaaa');
})

As you can see, I tried it with and without async and the result is the same. Attached are 2 screenshots of the browsers development tool console, where it can be seen that the scripts are loaded. What confuses me is that none of the console log that is inside getSeeqApi() is displayed, while outside of it they are displayed.
Thank you in advance!

[Bryan Zimmerman]

Hi Eolian,

If I'm understanding correctly, it sounds like in the simplified example above, the index.html and main.js files have been created in (or uploaded to) a Data Lab project, and HTML file is being viewed in the Data Lab project. If that is the case, then the getSeeqApi() call will not be available. The getSeeqApi() function is only available to JavaScript code that has been loaded from a plugin, and is therefore running in a sandboxed iframe hosted within the main Seeq application.

I'm working on a Knowledge Base article about plugins and plugin development that I believe will help bring clarity. I'm hoping to get it finished and published tomorrow.

In the meantime, if you have time to use the https://github.com/seeq12/seeq-addon-templates project to create a packaged Add-on that includes a ToolPane plugin and Data Lab Functions backend, it would show you a good example to reference.

You should be able to get it going by following the README. If you do pursue this, please let us know if you run into any issues.

The example ToolPane plugin looks like the following. It's similar to your example in that is uses a simple index.html file and a main.js file.

The frontend POSTs to a Data Lab Functions /combine endpoint to combine the signals.

The frontend call looks like...

The Data Lab Functions endpoint in api.ipynb that gets called looks like...

Which calls this Python function in api.py to combine the signals...

I hope this helps to keep you moving forward. I'll let you know here when I get the plugin article published.

Bryan

[Bryan Zimmerman]

Hi Eolian,

The plugin article has been published. You can find it here: https://support.seeq.com/kb/latest/cloud/frontend-plugins.

Bryan