JavaScript plugins

JavaScript plugins allow you to add custom UI elements and code to the Deephaven Web UI. This guide covers three types of plugins, each serving a different purpose: table plugins, application plugins, and login plugins.

Note

For more details and examples, see the JavaScript plugin template repository.

Initial setup

Clone the JavaScript plugin template repository and install dependencies:

git clone https://github.com/deephaven/js-plugin-template.git
cd js-plugin-template
npm install

The plugin's entry point is src/index.js. You can modify this file to import different example plugins based on the type you want to create.

Build the plugin

After configuring your source files, build the plugin:

npx webpack --config webpack.config.js

Your output will be in dist/main.js.

Table plugins

Table plugins enhance individual table displays with custom functionality, visualizations, or interactions.

Example

The template repository includes ExamplePlugin.jsx, which demonstrates a basic table plugin. This is the default example imported in src/index.js.

Configuration

  1. Create a directory on your Deephaven server to store plugins.

  2. Set the Webapi.plugins property to point to the plugins directory. See Deephaven properties files for details on managing properties.

  3. Copy the built plugin file dist/main.js to the plugins directory on your Deephaven server and rename it (e.g., ExamplePlugin.js).

  4. The file name becomes the plugin name; for example, ExamplePlugin.js will be available as ExamplePlugin.

  5. In your code, set the PLUGIN_NAME attribute on a table to associate it with your plugin:

table = table.with_attributes({"PLUGIN_NAME": "ExamplePlugin"})

Application plugins

Application plugins add UI components or functionality to the Deephaven web interface itself, rather than to individual tables. These plugins can add new panels, toolbar buttons, or other application-level features.

Example

The template repository includes ExampleAppPlugin.jsx. To use this example, replace the import in src/index.js:

import ExampleAppPlugin from './examples/ExampleAppPlugin';

Configuration

  1. Follow steps 1-4 from Table plugins configuration to upload your plugin to the Deephaven server.

  2. Set the Webapi.app.plugins property to your plugin name. This property accepts a comma-separated list to support multiple plugins.

Login plugins

Login plugins load before the user authenticates and allow you to control UI permissions. These plugins can enable or disable specific features for different users or groups.

Example

The template repository includes ExampleLoginPlugin.jsx. To use this example, replace the import in src/index.js:

import ExampleLoginPlugin from './examples/ExampleLoginPlugin';

Configurable permissions

Login plugins can control the following permissions by calling the onPermissionOverrides function in componentDidMount. Each permission defaults to true but can be set to false for specific users or groups:

  • canUsePanels - Access to the Panels button in the UI.
  • canCreateDashboard - Ability to create a new Dashboard.
  • canCreateCodeStudio - Ability to create a new Code Studio.
  • canCreateQueryMonitor - Ability to create a new Query Monitor.
  • canCopy - Ability to copy cells and rows from a table.
  • canDownloadCsv - Ability to download a table to CSV.
  • canShareDashboards - Ability to share owned dashboards.
  • canViewDashboardSharedUsers - Ability to view the list of users a dashboard is shared with.
  • canShareQueries - Ability to share owned queries.
  • canViewQuerySharedUsers - Ability to view the list of users a query is shared with.

The onPermissionOverrides function should return an object with only the permissions that need to be changed. If a user should have the default permissions, return an empty object.

Configuration

  1. Follow steps 1-4 from Table plugins configuration to upload your plugin to the Deephaven server.

  2. Set the Webapi.login.plugins property to your plugin name. This property accepts a comma-separated list to support multiple login plugins.

  3. Add the following property to allow the login plugin to load before user authentication:

authentication.client.configuration.list=Webapi.login.plugins