The Tool Pane Plugin Example is a slightly more complex frontend plugin example than the Basic Example because this example includes JavaScript. The plugin will make an API call to a Data Lab Functions (DLF) backend. We’ll see how the frontend plugin and DLF backend can be combined into a packaged Add-on that can be installed using the Add-on Manager.
For the frontend, we’ll create a ToolPane plugin that calls a Data Lab Functions backend to combine two signals. The user interface looks like what you see below. It allows signals from the Analysis Details Pane to be selected, along with an operation to be performed on the signals. The available operations are add, subtract, divide, and multiply.
HTML
The plugin’s index.html file contains the following HTML to render the UI you see above.
The main.js file contains JavaScript to implement the desired behavior. In the callback from the DOMContentLoaded event, we get the Seeq plugin API by calling getSeeqApi(), and we call the API Function subscribeToSignals() to get a callback whenever the signals in the Details Pane change. When the “Execute” button is clicked, we call the calculate() function, which makes a POST request to a Data Lab Functions (DLF) /combine endpoint to combine the signals. Note the use of getDataLabProject() to get the DLF project ID and callDataLabApi() to call the DLF endpoint.
To create a valid plugin, a plugin.json file is needed. This file provides metadata that is needed by Seeq to install the plugin.
plugin.json
JSON
{
"category": "ToolPane",
"identifier": "com.seeq.example.tool-pane-plugin",
"name": "Example Tool Pane Plugin",
"description": "A plugin that combines two signals",
"version": "0.0.1",
"icon": "fa-bullseye",
"entryPoint": "",
"host": {},
"options": {}
}
Plugin Artifact
With the index.html, main.js, styles.css, and plugin.json files, we have everything we need to create a plugin artifact that can be installed in Seeq.
A Seeq plugin is simply a zip archive with a .plugin file extension that contains the plugin’s files.
We can create it by running the following command.
CODE
zip Example.plugin plugin.json index.html main.js styles.css
At this point, we have a valid Example.plugin that could be installed in Seeq.
The seeq-addon-templates project provides tooling that takes care of building your plugin and packaging it into a Seeq Add-on that can be installed using the Add-on Manager. It also has tooling to watch your source files, automatically package the add-on, and upload it to Seeq whenever you change your source code during development.
Backend
With the frontend implemented, we’ll now take a brief look at the Data Lab Functions backend that is called by the plugin to combine the signals.
A Data Lab Functions backend is a Data Lab Project that has the projectType set to DATA_LAB_FUNCTIONS. It typically has a single notebook (often name api.ipynb) that describes the backend API, and other Python files as required to implement the desired behaviors.
For this example, our backend api.ipynb notebook consists of a context cell to declare imports and a cell to define the /combine endpoint.
The context cell imports dependencies and declares the REQUEST and LOG types.
CODE
import my_datalab_functions_example
from logging import Logger
from typing import Any
REQUEST: Any
LOG: Logger
The endpoint cell defined the POST/combine endpoint.
CODE
# POST /combine
my_datalab_functions_example.api.combine(REQUEST, LOG)
The my_data_lab_functions module contains a single api.py file with the logic for the combine operation.
api.py
CODE
import pandas as pd
from logging import Logger
from seeq import spy
from typing import Any
def combine(REQUEST: Any, LOG: Logger) -> str:
# Get params from request body
idA = REQUEST['body']['idA']
idB = REQUEST['body']['idB']
op = REQUEST['body']['op']
workbook_id = REQUEST['body']['workbookId']
worksheet_id = REQUEST['body']['worksheetId']
# Create the formula to add the two signals
metadata = pd.DataFrame([{
'Name': f'Plugin Combined Signal',
'Formula': f"$signalA.setUnits('') {op} $signalB.setUnits('')",
'Formula Parameters': {
'signalA': idA,
'signalB': idB
},
'Type': 'Formula'
}])
# Push the formula to Seeq
LOG.info(f"Pushing formula for 'Plugin Combined Signal' to workbook {workbook_id}")
combined_signal = spy.push(workbook=workbook_id, metadata=metadata)
include_inventory = True if spy.user.is_admin else False
# Get the current worksheet
workbook = spy.workbooks.pull(workbook_id, include_inventory=include_inventory)[0]
worksheet = next((ws for ws in workbook.worksheets if ws.id == worksheet_id), None)
# Add the combined signal if it's not already displayed on the worksheet
combined_signal_id = combined_signal['ID'].values[0]
if combined_signal_id not in worksheet.display_items['ID'].values:
LOG.info(f"Adding signal {combined_signal_id} to worksheet {worksheet_id}")
worksheet.display_items = pd.concat([worksheet.display_items, combined_signal]).reset_index()
# Push the updated worksheet back to Seeq
LOG.info(f"Updating worksheet {worksheet_id} in workbook {workbook_id}")
results = spy.workbooks.push(workbook, include_inventory=include_inventory)
return results.to_json()
When the frontend plugin makes an API call to the backend /combine endpoint, the Data Lab Functions project is launched (if it is not already running) and the backend code runs to combine the signals.
Packaged Add-ons
Now that Seeq has the Add-on Manager available, the best way to get your frontend plugin and associated Data Lab Functions backend installed is to package them together in a packaged Add-on that can be installed and managed using the Add-on Manager.
We recommend using the https://support.seeq.com/kb/latest/cloud/add-on-package-example-generator as a starting point for your project because it provides all the build infrastructure out of the box to create a packaged Add-on. This allows you to focus on your code instead of the technical details that are required to create a packaged Add-on.
As a user without administrative privileges in Seeq, you can still install packages Add-ons, but they are only visible to you. Contact an admin to get your packaged Add-on installed for other users and groups in Seeq. Also, please contact your administrator if the Add-on Manager is not available. You may need to be given permission to see and use it.
JavaScript errors detected
Please note, these errors can depend on your browser setup.
If this problem persists, please contact our support.